<template>
	<Layout class="layout-container">
		<Content>
			<Spin fix v-if="loading"></Spin>
			<Layout class="layout-container">
				<Content class="padding-all">
					<Tree 
						ref="tree" 
						show-checkbox 
						check-strictly
						:data="data" 
						@on-check-change="onCheckChange"></Tree>
				</Content>
				<div class="padding-all">
	    			<span class="pull-right">
					<Button @click="reset">{{$t('info.reset')}}</Button>
					<Button 
						type="primary" 
						html-type="submit" 
						@click.prevent="submit">{{$t('info.submit')}}</Button>
					</span>
				</div>
			</Layout>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Tree, Button } from 'view-design';
import { each, msuccess, extend } from 'config/utils';

//树形数据
const URI_TREE = "/security/api/router/tree";
//关联
const URI_SUBMIT = "/security/api/router/perm";

export default {
	name: "SysRouterPerm",
	props: {
		params: Object
	},
	data() {
		return {
			loading: true,
			data: [
				{
                    title: this.$t('sys.router.perm.root'),
                    expand: true,
                    disabled: true,
                    children: []
                }
			]
		};
	},
	methods: {
		submit() {
			this.loading = true;
			var selections = this.$refs.tree.getCheckedNodes();
			var permId = '';
			if(selections && selections.length) {
				permId = selections[0].id;
			} 
			this.$http.post(URI_SUBMIT, {
				id:this.params.id,
				permId: permId
			}).then((response) => {
				var res = response.data;
				if(res.success) {
					this.$emit("callback", {id: this.params.id, permId});
					this.$emit('close');
					msuccess(this.$t('info.success'));
				}
				this.loading = false;
			});
		},
		reset() {
			var selections = this.findItem(this.data, e => e.checked === true);
			if(selections.length) {
				this.$set(selections[0], 'checked', false);
			}
			var items = this.findItem(this.data, e => e.id === this.params.permId, true);
			if(items.length) {
				this.$set(items[0], 'checked', true);
			}
		},
		onCheckChange(selections, item) {
			each(selections, (selection) => {
				if(selection.id != item.id) {
					this.$set(selection, 'checked', false);
				}
			});
		},
		findItem(data, filter, expand) {
			var result = [];
			var isExpandParent = expand == true;
			var items = data.find((e) => {
				var isOk = filter(e);
				if(e.children && e.children.length) {
					var children = this.findItem(e.children, filter, expand);
					if(children) {
						if(children instanceof Array) {
							each(children, (child) => {
								result.push(child);
							});
							if(isExpandParent && children.length) {
								this.$set(e, 'expand', true);
							}
						} else {
							result.push(children);
							if(isExpandParent) {
								this.$set(e, 'expand', true);
							}
						}
					}
				}
				return isOk;
			});
			if(items) {
				if(items instanceof Array) {
					each(items, (item) => {
						result.push(item);
					});
				} else {
					result.push(items);
				}
			}
			return result;
		},
		build(children, perms) {
			var me = this;
			each(perms, function() {
				var item = {
					id: this.id,
					title: this.name
				};
				if(this.children && this.children.length) {
					item.children = [];
					me.build(item.children, this.children);
				} else {
					item.checked = false;
				}
				children.push(item);
			});
		}
	},
	mounted() {
		this.$http.post(URI_TREE).then((response) => {
			var res = response.data;
			if(res.success) {
				this.build(this.data[0].children, res.data);
				this.reset();
			}
			this.loading = false;
		});
	},
	components: {
		Layout,
		Content,
		Spin,
		Tree,
		Button
	}
}
</script>